<template>
  <div class="demo">
    <h1>当前计数为：{{ $store.state.home.count }}</h1>
    <h1>当前计数为：{{ count }}</h1>
    <h1>当前计数为：{{ $store.getters['home/getCount'] }}</h1>
    <h1>当前计数为：{{ getCount }}</h1>
    <button @click="addCount">+</button>
  </div>
</template>
<script>
import {
  mapState,
  // mapMutations,
  mapGetters,
  mapActions
} from 'vuex'
export default {
  created() {
    this.getTodos(1)
    // this.$store.dispatch('getTodos', 1)
  },
  data() {
    return {}
  },
  methods: {
    // getTodos(id) {
    //   this.$store.dispatch('home/getTodos', id)
    // },
    // ...mapActions('home', ['getTodos']),
    ...mapActions({
      getTodos: {
        type: 'home/getTodos',
        id: 1
      }
    }),
    addCount() {
      // this.$store.commit('ADD_COUNT')
      this.$store.commit({
        type: 'home/ADD_COUNT',
        step: 2
      })
    }
    // ...mapMutations('home', ['ADD_COUNT'])
    // ...mapMutations({
    //   addCount: {
    //     type: 'home/ADD_COUNT',
    //     step: 2
    //   }
    // })
  },
  computed: {
    test() {
      return false
    },
    // count() {
    //   return this.$store.state.count
    // },
    // ...mapState('home', ['count']),
    // 推荐
    ...mapState({
      count: (state) => state.home.count
    }),
    // ...mapGetters('home', ['getCount'])
    ...mapGetters({
      getCount: 'home/getCount'
    })
  }
  // computed: mapState({
  //   count: (state) => state.count
  // })
}
</script>
<style lang="scss" scoped></style>
